import style,{ px2rem } from "@/assets/global-style";
import styled from "styled-components";

export const BannersWrapper = styled.div`
/* height: 1.582rem; */
/* height:100px; */
background-color: pink;

.btn_banners{
    width:100%;
    height:100px;
    background:#fff;
    
}
.swiper-slide{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}
.swiper-item{
    display: flex;
    /* flex-direction: row; */
    width: 20%;
    /* height:40%; */
    /* width: 20px; */
    /* height: 40%; */
    justify-content: space-around;
    
} 
.swiper-item div{
    display:flex;
    /* flex-direction: column; */
    justify-content: center;
    align-items: center;
    /* margin-top:3vw; */
    
}
.swiper-item div p{
    /* height:14vw; */
    /* width:14vw; */
    background: skyblue;
}
.swiper-item div img{
    height:100%;
    width:100%
}
.swiper-pagination{
    bottom: 0;
    
}
.swiper-pagination-bullet{
    border-radius: 0;
    height: 2px;
}
`
export const Wrapper=styled.div`
    .item{
        height:${px2rem(200)};
    }
    .carousel{
        height: ${px2rem(200)};
        /* margin-top: 0; */
        margin: 0 ${px2rem(10)};
    }
    img{
        margin:auto;
        max-height: 100%;
        max-width: 100%;
    }
`

export const TabBar=styled.div`
.tabbar{
    margin-top: 0;
    margin: ${px2rem(10)};
}
    .tab{
        display: flex;
        height: ${px2rem(44)};
        .link{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            /* height:20%; */
            width: 20%;
            i{
                font-size: ${style["font-size-l"]};
            }
            span{
                font-size: ${style["font-size-s"]};
            }
        }
    }
`